<template>
	<view>
		<loin v-if="active!=0"></loin>
		<view style="height: 164rpx;"></view>
		<div class="footer-conter flex-line-height flex-height-between">
			<view @click="goPages('/pages/index/index')"  class="footer-list  flex-content flex-wrap" :class="{
				active:active==0
			}">
				<image class="img" :src="imgUrl+'/footer/home.png'" mode=""></image>
				<image class="imgActive" :src="imgUrl+'/footer/homeActove.png'" mode=""></image>
				<view class="size">首页</view>
			</view>
		
			<view class="footer-list" @click="goPages('/pages/Job/shaiXuan')"  :class="{
				active:active==2
			}" v-if="in_conf.if_show && in_conf.if_show.ren">
				<view class="ai">
					<view class="aiConter">
						 <image style="width: 100%;height: 100%;" :src="imgUrl+'/aicss2.png'" mode=""></image>
					</view>
				</view>
			</view>
	
			<view @click="goPages('/pages/home/index')" :class="{
				active:active==3
			}"  class="footer-list  flex-content flex-wrap">
				<image class="img" :src="imgUrl+'/footer/myconter.png'" mode=""></image>
				<image class="imgActive" :src="imgUrl+'/footer/myconter-1.png'" mode=""></image>
				<view class="size">我的</view>
			</view>
		</div>
	
	</view>
</template>

<script>
	import loin from "@/components/loin.vue"
	import {
		Request
	} from '@/utils/request.js'
	export default {
		props:{
			active:{
				type:[Number,String],
				default:()=>0
			},
		},
		components:{
			loin
		},
		data(){
			return {
				imgUrl:this.imgUrl,
				in_conf:{},
			}
		},
		onShow() {
			this.appraisalgetAppraisalResult();
			this.indexconf();
			
		},
		methods:{
			openContelITs(){
				// if(this.forInfo && this.forInfo.name){
				// 	this.goPages('/pages/ai/cepingJIlu');
				// }else if(!this.forInfo.name){
					this.goPages('/pages/ai/index');
				//}
			},
			indexconf(){
				Request('index_conf',{
				}).then((res) => {
					//console.log(res)
					this.in_conf=res;
					// this.jobConList = this.jobConList.concat(tdata);
				})
			},
			appraisalgetAppraisalResult(){
				Request('appraisal/getAppraisalResult',{
				}).then((res)=>{
					// console.log(res);
					this.forInfo=res.data.data;
				})
			},
			goPages(path){
				uni.reLaunch({
					url:path
				})
			},
			aiConterArrList(){
				
			}
		}
	}
</script>

<style scoped> 
	.footer-conter{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9;
		width: 100%;
		height: 120rpx;
		padding-bottom: env(safe-area-inset-bottom);
		background: #FFFFFF;
		box-shadow: 0rpx -10rpx 10rpx 1rpx rgba(0,0,0,0.05);
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.footer-list{
		position: relative;
		width: 33.33%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.footer-list .ai{
		position: absolute;
		top: -86rpx;
		left: 50%;
		transform: translate(-50%);
		padding: 10rpx;
		color: #FFFFFF;
		font-size: 40rpx;
		background-color: red;
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		background-color: #FFFFFF;
		box-shadow: 0rpx -10rpx 10rpx 1rpx rgba(0,0,0,0.05);
	}
	.footer-list .aiConter{
		width: 104rpx;
		line-height: 104rpx;
		height: 104rpx;
		border-radius: 50%;
		text-align: center;
		background: linear-gradient( 180deg, #1940E2 0%, #5FBCFF 100%);
		box-shadow: inset 0rpx 7rpx 21rpx 1rpx rgba(255,255,255,0.51);
	}
	.footer-list .imgActive{
		display: none;
	}
	.footer-list .imgActive,.footer-list .img{
		width: 44rpx;
		height: 44rpx;
	}
	.footer-list.active .imgActive{
		display: block;
	}
	.footer-list.active .img{
		display: none;
	}
	.footer-list .size{
		width: 100%;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #0D0E0F;
		line-height: 36rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.footer-list.active .size{
		color: #3B5EEC;
	}
</style>